<script setup>
            const title= "技术社区";
            const activeIndex= 0;
            const activeName=1;
            const keywords= "";
            const user= {
              name: "张三",
              username: "admin",
              age: 18,
              gender: "男",
              hobby: "",
              job: "前端开发工程师",
              bio: "程序员的一天,测试部署编程开发测试部署需求分析测试部署编程开发测试部署",
            },
            myArts=[]
            const artList=[{
                title:"今天学习条件渲染"
            }];
            const courseList=[];
            const productList=[];
                
</script>

<template>
    <el-container>
        <el-header>
          <el-row>
            <el-col :span="4">
              <img src="/images/logo.png" />
              <h1>{{title}}</h1>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-menu class="el-menu-d---emo" mode="horizontal" :default-active="activeIndex">
                <el-menu-item index="0">首页</el-menu-item>
                <el-menu-item index="1">文章</el-menu-item>
                <el-menu-item index="2">课程</el-menu-item>
                <el-menu-item index="3">商场</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6" :offset="2">
              <el-input v-model="keywords" placeholder="请输入搜索关键词" />
            </el-col>
            <el-col :span="4">
              <el-link type="primary" underline="never">
                <el-avatar src="/images/avatar.png" />
                <p style="padding: 0 20px">{{user.username}}</p>
              </el-link>
            </el-col>
          </el-row>
        </el-header>

        <el-container class="main">
          <el-aside>
            <el-card>
              <el-menu>
                <el-menu-item index="1">
                  <el-icon><House /></el-icon>
                  <span>个人主页</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <el-icon><User /></el-icon>
                  <span>个人资料</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <el-icon><Setting /></el-icon>
                  <span>账号设置</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <el-icon><Bell /></el-icon>
                  <span>消息设置</span>
                </el-menu-item>
                <el-menu-item index="5">
                  <el-icon><Monitor /></el-icon>
                  <span>后台管理</span>
                </el-menu-item>
                <el-menu-item index="6">
                  <el-icon><Collection /></el-icon>
                  <span>退出登录</span>
                </el-menu-item>
              </el-menu>
            </el-card>
          </el-aside>
          <el-main>
            <el-card>
              <el-row>
                <el-col :span="6">
                  <el-avatar :size="100" src="/images/avatar.png"></el-avatar>
                </el-col>
                <el-col :span="18">
                  <h2>{{user.username}}</h2>
                  <p>性别：{{user.gender}} | 岗位：{{user.job}}</p>
                  <p>签名档：{{user.bio}}</p>
                </el-col>
              </el-row>
            </el-card>
            <el-card>
              <el-tabs v-model="activeName">
                <el-tab-pane label="我发布的文章" name="1">
                    <div v-if="myArts.length>0">列表数据</div>
                    <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="我收藏的文章" name="2">
                    <div v-if="artList.length>0">列表数据</div>
                    <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="我收藏的课程" name="3">
                    <div v-if="courseList.length>0">列表数据</div>
                    <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="我收藏的商品" name="4">
                    <div v-if="productList.length>0">列表数据</div>
                    <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-main>
        </el-container>

        <el-footer>
          <el-row>
            <el-col :span="8">
              <div><img src="/images/logo.png" /></div>
              <div>
                <h1>技术社区</h1>
                <p>致力于构建一个专业的IT技术交流社区</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-button type="text">首页</el-button>
                <el-button type="text">文章</el-button>
                <el-button type="text">课程</el-button>
                <el-button type="text">商场</el-button>
              </div>
              <div>
                <el-button type="text">关于我们</el-button>
                <el-button type="text">使用手册</el-button>
                <el-button type="text">隐私条款</el-button>
                <el-button type="text">建议反馈</el-button>
              </div>
            </el-col>
            <el-col :span="8">
              <h2>联系我们</h2>
              <p>电话：123456789</p>
              <p>邮箱：xxx@xxx.com</p>
            </el-col>
          </el-row>
          <el-row><p style="margin: 20px 0">软件开发工作室版权所有</p></el-row>
        </el-footer>
      </el-container>
</template>

<style></style>